<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('表格虚拟滚动')"/>
    </head>
    <body class="gray-bg">
        <div class="container-div">
            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" onclick="loadRows()">
                    <i class="fa fa-plus"></i> 加载10000行数据
                </a>
                <a class="btn btn-info" onclick="appendRows()">
                    <i class="fa fa-edit"></i> 追加10000行数据
                </a>
                &nbsp;&nbsp;<span class="badge badge-success" id="total"></span>
            </div>
            <div class="row">
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
        <div th:include="include :: footer"></div>
        <script>
            var total = 0

            $(function () {
                var options = {
                    data: getData(20),
                    height: 400,
                    sidePagination: "client",
                    pagination: false,
                    showSearch: false,
                    virtualScroll: true,
                    columns: [{
                        field: 'userId',
                        title: '用户ID'
                    },
                        {
                            field: 'userCode',
                            title: '用户编号'
                        },
                        {
                            field: 'userName',
                            title: '用户姓名'
                        },
                        {
                            field: 'userPhone',
                            title: '用户手机'
                        },
                        {
                            field: 'userEmail',
                            title: '用户邮箱'
                        },
                        {
                            field: 'userBalance',
                            title: '用户余额'
                        }]
                };
                $.table.init(options);
            });

            function getData(number, isAppend) {
                if (!isAppend) {
                    total = 0
                }
                var data = []
                for (var i = total; i < total + number; i++) {
                    var randomId = 100 + ~~(Math.random() * 100);
                    data.push({
                        userId: i + 1,
                        userCode: 2000000 + randomId,
                        userName: '测试' + randomId,
                        userPhone: '1588888888',
                        userEmail: 'ry1@qq.com',
                        userBalance: 10 + randomId,
                    })
                }
                if (isAppend) {
                    total += number
                } else {
                    total = number
                }
                $('#total').text(total);
                return data;
            }

            function loadRows() {
                $('#bootstrap-table').bootstrapTable('load', getData(10000))
            }

            function appendRows() {
                $('#bootstrap-table').bootstrapTable('append', getData(10000, true))
            }
        </script>

    </body>
</html>